CSS @property: Майстерне визначення та валідація типів кастомних властивостей

У світі веб-розробки, що постійно розвивається, для того, щоб бути попереду, необхідно впроваджувати нові технології та методи, які підвищують ефективність, зручність обслуговування та загальний досвід користувача. Кастомні властивості CSS, також відомі як змінні CSS, кардинально змінили спосіб управління та контролю стилів. Із запровадженням at-правила @property, CSS отримує ще потужніший інструмент: можливість визначати та валідувати ці кастомні властивості, що веде до більш надійної та передбачуваної стилізації.

Що таке CSS @property?

At-правило @property дозволяє розробникам визначати тип, синтаксис та інші характеристики кастомних властивостей. Уявіть це як спосіб надати структуру та валідацію для ваших змінних CSS. До появи @property змінні CSS були, по суті, просто текстовими рядками, які могли містити будь-що. Ця відсутність структури могла призводити до помилок, ускладнюючи налагодження та заважаючи загальній узгодженості дизайну. @property вирішує ці проблеми, надаючи механізм для контролю типів значень, які можна присвоїти вашим кастомним властивостям.

Навіщо використовувати CSS @property? Переваги та вигоди

Переваги використання @property численні і безпосередньо сприяють покращенню практик веб-розробки:

• Покращена підтримка коду: Чітко визначаючи типи та поведінку кастомних властивостей, ви робите свій код більш самодокументованим та легким для розуміння. Інші розробники (або ви самі в майбутньому) швидко зрозуміють, як саме призначена для використання кастомна властивість.
• Покращена узгодженість дизайну: Валідація гарантує, що кастомним властивостям присвоюються лише допустимі значення. Це допомагає підтримувати послідовний візуальний вигляд на вашому веб-сайті чи в додатку.
• Надійність та запобігання помилкам: Недійсні значення будуть відхилені, що запобігає несподіваним проблемам зі стилізацією та скорочує час на налагодження.
• Динамічна стилізація: @property забезпечує кращу інтеграцію з JavaScript, дозволяючи вам програмно керувати та оновлювати змінні CSS з упевненістю, знаючи, що значення є дійсними.
• Краще автодоповнення та досвід розробника: Редактори коду можуть надавати більш інтелектуальне автодоповнення та підказки, допомагаючи розробникам писати CSS швидше та точніше.
• Оптимізована продуктивність: Хоча вплив на продуктивність зазвичай невеликий, валідація іноді може призвести до незначних оптимізацій з боку браузера.

Основні компоненти правила @property

At-правило @property складається з кількох ключових компонентів, які визначають поведінку кастомної властивості.

--property-name

Це назва кастомної властивості, яку ви визначаєте. Вона повинна починатися з двох дефісів (--), як це є стандартом для кастомних властивостей CSS.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

Дескриптор syntax визначає дозволений тип або шаблон для значень кастомної властивості. Він використовує підмножину синтаксису CSS і може приймати різні значення, зокрема:

• <color>: Представляє значення кольору (напр., red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Представляє значення довжини (напр., 10px, 5em, 20%).
• <number>: Представляє числове значення (напр., 10, 3.14).
• <percentage>: Представляє відсоткове значення (напр., 50%).
• <url>: Представляє URL-адресу (напр., url('image.jpg')).
• <integer>: Представляє ціле число (напр., 10, -5).
• <angle>: Представляє значення кута (напр., 45deg, 0.5turn).
• <time>: Представляє значення часу (напр., 2s, 200ms).
• <string>: Представляє рядкове значення.
• <image>: Представляє значення зображення (те ж саме, що й url).
• *: Приймає будь-яке дійсне значення CSS. Це дуже гнучкий підхід, який слід використовувати з обережністю.
• Комбіновані типи: Ви можете комбінувати кілька типів, використовуючи списки, розділені пробілами (напр., <length> <length> <length> для визначення трьох значень довжини) або використовувати символ '|' для дозволу будь-якого з перерахованих типів (напр., <length> | <percentage> для підтримки довжини або відсотка).
• Кастомні синтаксиси: Кастомні синтаксиси для більш складних сценаріїв часто підтримуються користувацькими реалізаціями, хоча зазвичай вони описуються за допомогою синтаксису, подібного до регулярних виразів, наприклад [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

Дескриптор inherits визначає, чи успадковує кастомна властивість своє значення від батьківського елемента. За замовчуванням кастомні властивості не успадковуються. Цю поведінку можна контролювати за допомогою булевого значення: true або false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

Дескриптор initial-value встановлює значення за замовчуванням для кастомної властивості, якщо воно не визначене явно в CSS. Це забезпечує резервне значення, коли властивість не вказана, подібно до поведінки стандартних властивостей CSS.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Практичні приклади

Давайте розглянемо кілька практичних прикладів, щоб проілюструвати, як ефективно використовувати @property.

Приклад 1: Визначення властивості кольору

У цьому прикладі ми визначаємо кастомну властивість --primary-color для представлення основного кольору в нашій дизайн-системі. Ми вказуємо, що вона приймає лише значення кольору.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Valid */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valid */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Приклад 2: Визначення властивості довжини

Тут ми визначаємо кастомну властивість --spacing для керування відступами між елементами, яка приймає значення довжини. Цей приклад чітко демонструє цінність встановлення `initial-value` як значення за замовчуванням для всього сайту. Це особливо корисно при використанні дизайн-системи, в якій визначені відступи за замовчуванням.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Приклад 3: Визначення цілочисельної властивості

Цей приклад визначає кастомну властивість для кількості колонок у сітковій розмітці, перевіряючи, що значення є цілим числом.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Приклад 4: Успадкування властивостей

Тут ми визначаємо кастомну властивість, яка *буде* успадковуватися. Властивість `font-size`, встановлена в `1rem` для body, впливатиме на всі його дочірні елементи, якщо не буде перевизначена.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Overrides inherited value */
}

            

              
                Copy
              
            
          

Приклад 5: Комбінування типів

Використовуючи оператор '|', ми можемо комбінувати типи. Тут ми приймаємо або `length`, або `percentage` для зміщення тіні.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Найкращі практики використання @property

Щоб максимізувати переваги @property, дотримуйтесь цих найкращих практик:

• Визначайте властивості в централізованому місці: Групуйте ваші визначення @property у спеціальному CSS-файлі або розділі, часто на початку вашої основної таблиці стилів або у файлі дизайн-системи. Це сприяє організації та полегшує керування кастомними властивостями.
• Використовуйте описові назви властивостей: Вибирайте назви, які чітко вказують на призначення кожної кастомної властивості (напр., --primary-button-color, --header-font-size). Це покращує читабельність та розуміння.
• Надавайте вичерпну документацію: Документуйте ваші кастомні властивості, включаючи їх синтаксис, використання та будь-які обмеження. Цю документацію можна включити у вигляді коментарів поруч із вашим CSS або в окремому посібнику зі стилю.
• Вибирайте правильний синтаксис: Ретельно обирайте відповідний syntax для кожної властивості. Використання правильного синтаксису запобігає помилкам і гарантує, що присвоєні значення є дійсними.
• Ретельно розглядайте успадкування: Вирішіть, чи повинна властивість успадковувати своє значення від батьківського елемента. Це залежить від природи властивості та того, як вона має застосовуватися у вашому дизайні.
• Використовуйте initial-value стратегічно: Встановлюйте initial-value для всіх кастомних властивостей, які потребують значення за замовчуванням. Це забезпечує резервне значення і гарантує, що стиль буде застосовано, навіть якщо властивість не встановлена явно.
• Використовуйте дизайн-системи: Інтегруйте @property у вашу дизайн-систему для підтримки узгодженості та покращення робочого процесу розробки вашої команди. Використовуючи його разом з іншими компонентами, ви створюєте більш надійні та модульні дизайни, що часто є метою при створенні компонентів для глобального використання.
• Тестуйте ретельно: Тестуйте ваші кастомні властивості та їх поведінку в різних браузерах та на різних пристроях, щоб забезпечити сумісність та послідовний досвід користувача. Кросбраузерне тестування є критично важливим кроком, оскільки підтримка `property` ще не є універсально реалізованою.

Сумісність з браузерами

Станом на 26 жовтня 2023 року підтримка at-правила @property відрізняється в різних браузерах. Chrome, Edge та Safari мають хорошу підтримку, тоді як підтримка у Firefox знаходиться в обмеженому стані. Завжди звертайтеся до таких ресурсів, як Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)), щоб бути в курсі сумісності з браузерами.

Важливі аспекти сумісності з браузерами:

• Виявлення функцій: Використовуйте техніки виявлення функцій для коректної обробки браузерів, які не підтримують @property. Ви можете використовувати перевірку властивостей CSS або виявлення функцій за допомогою JavaScript, щоб застосувати альтернативні стилі або поліфіли.
• Прогресивне покращення: Розробляйте свій веб-сайт з базовою стилізацією, яка працює без @property. Потім поступово покращуйте дизайн, додаючи підтримку @property для сумісних браузерів.
• Поліфіли та резервні варіанти: Розгляньте можливість використання поліфілів або надання резервних варіантів для браузерів, які не повністю підтримують @property. Це може включати використання звичайних змінних CSS або попередню обробку за допомогою SASS, LESS або інших методологій.

Використання CSS @property з JavaScript

Однією з найбільших переваг кастомних властивостей CSS є їхня здатність до маніпуляцій за допомогою JavaScript, що уможливлює динамічну стилізацію та покращений досвід користувача. @property розширює цю можливість, роблячи інтеграцію між CSS та JavaScript ще більш потужною та передбачуваною.

Ось як ви можете взаємодіяти з кастомними властивостями, визначеними за допомогою @property, у JavaScript:

1. Отримання значення кастомної властивості: Використовуйте getPropertyValue() для отримання значення кастомної властивості.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // e.g., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Встановлення значення кастомної властивості: Використовуйте setProperty() для встановлення значення кастомної властивості. Завдяки параметру syntax у визначенні `@property`, встановлення значення через JavaScript може ініціювати його валідацію в браузері.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Приклад: Динамічна зміна кольору за допомогою JavaScript

Давайте проілюструємо, як створити динамічну зміну кольору за допомогою JavaScript та @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Could be based on some logic/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

У цьому прикладі натискання кнопки змінює колір фону кнопки шляхом модифікації кастомної властивості --button-color за допомогою JavaScript.

Інтернаціоналізація (i18n) та CSS @property

CSS @property може бути цінним інструментом у створенні веб-додатків, що підтримують різні мови та локалі. Ось як його можна застосувати до i18n:

• Типографіка: Визначайте кастомні властивості для розмірів шрифтів, висоти рядків та сімейств шрифтів, що дозволяє адаптувати вигляд тексту залежно від обраної мови.
• Розмітка: Використовуйте властивості для відступів, полів та заповнень, щоб враховувати варіації в напрямку тексту (напр., зліва-направо проти справа-наліво) та різну ширину символів.
• Кольори: Використовуйте властивості для кольорів елементів інтерфейсу, таких як кольори кнопок, тексту та фону. Їх можна налаштовувати відповідно до культурних уподобань або дизайнерських рекомендацій для конкретних регіонів.
• Напрямок тексту: Використовуйте кастомну властивість для контролю напрямку тексту (напр., ltr, rtl) та відповідної модифікації розмітки.

Приклад: Адаптація розмірів шрифту залежно від мови

У цьому прикладі ми демонструємо, як адаптувати розмір шрифту заголовків відповідно до обраної мови. Цей підхід може використовувати бібліотеку JavaScript для визначення відповідної мови та встановлення кастомних властивостей.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Потім динамічно встановіть значення в JavaScript на основі визначеної мови:

            
// Assuming a global variable or function to get the user's language
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Adjust for Japanese
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Default
}

            

              
                Copy
              
            
          

Аспекти доступності

При роботі з @property важливо пам'ятати про доступність:

• Контрастність кольорів: Забезпечте достатню контрастність кольорів між текстом та фоном. Використовуйте кастомні властивості для кольорів, щоб легко оновлювати дизайн для відповідності вимогам контрастності.
• Розмір тексту: Дозвольте користувачам контролювати розмір тексту. Використовуйте відносні одиниці (rem, em) та кастомні властивості, щоб полегшити масштабування шрифтів.
• Індикатори фокуса: Налаштовуйте індикатори фокуса, щоб зробити їх чітко видимими. Використовуйте кастомні властивості для контролю кольору та стилю контурів фокуса.
• Атрибути ARIA: Переконайтеся, що елементи мають відповідні атрибути ARIA при використанні кастомних властивостей для контролю станів або поведінки.
• Навігація з клавіатури: Перевірте, чи легко переміщатися по вашому веб-сайту за допомогою клавіатури, особливо якщо кастомні властивості використовуються для управління інтерактивними елементами.

Кросбраузерні аспекти та обхідні шляхи

Хоча @property є потужним інструментом, пам'ятайте, що його підтримка браузерами ще не є універсальною. Вам слід застосовувати кросбраузерні техніки, щоб пом'якшити вплив відсутності підтримки.

• Прогресивне покращення: Розробляйте свою стилізацію з базовими змінними CSS, а потім використовуйте `@property` для додаткових функцій у підтримуваних браузерах.
• Виявлення функцій: Використовуйте методи виявлення функцій, щоб визначити, чи підтримує браузер @property, перш ніж застосовувати стилі з його використанням. Просту перевірку можна виконати за допомогою JavaScript.
• Резервні варіанти CSS: Надавайте резервні значення для властивостей, які не підтримуються. Це можна зробити, встановлюючи властивості безпосередньо, або використовуючи різні змінні для підтримуваних та непідтримуваних браузерів.
• Препроцесори: Використовуйте препроцесори CSS, такі як Sass або Less, для перетворення структур вищого рівня на стандартний CSS, який можна використовувати в браузерах без повної підтримки `@property`. Хоча це додає додатковий крок, переваги часто переважують недоліки.

Приклад резервного варіанту в CSS:

            
.element {
  --base-color: #333; /* Default value for browsers without @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Feature Detection for @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Add more complex styling here utilizing the @property */
}

            

              
                Copy
              
            
          

Інструменти та бібліотеки

Різноманітні інструменти та бібліотеки можуть допомогти в роботі з @property:

• Плагіни PostCSS: Плагіни, такі як `postcss-custom-properties` та `postcss-custom-properties-experimental`, можуть допомогти трансформувати кастомні властивості та забезпечити підтримку для старих браузерів, перетворюючи визначення `@property` на еквівалентні правила CSS.
• Stylelint: Інтегруйте stylelint та кастомні правила або плагіни для валідації використання та структури ваших кастомних властивостей.
• Фреймворки дизайн-систем: Інтегруйте @property у популярні фреймворки дизайн-систем, такі як Ant Design, Material UI та Bootstrap, щоб забезпечити узгодженість дизайну та надати розробникам більш плавний досвід.

Висновок

CSS @property є потужним доповненням до інструментарію веб-розробника, що приносить структуру, валідацію та динамічні можливості кастомним властивостям. Визначаючи тип та поведінку ваших змінних CSS, ви можете покращити підтримку коду, підвищити узгодженість дизайну та створювати більш надійні та передбачувані рішення для стилізації.

Оскільки підтримка браузерами покращується, включення @property у ваші проєкти стає все більш важливим. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете скористатися перевагами цієї нової функції та писати більш ефективний, зручний для підтримки та масштабований CSS. Використовуйте @property та трансформуйте свій робочий процес веб-розробки!

Для подальшого вивчення

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property